<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-列表组&well</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <ul class="list-group">
        <li class="list-group-item">免费域名注册</li>
        <li class="list-group-item">免费window空间托管</li>
        <li class="list-group-item">图像的数量</li>
        <li class="list-group-item"><span class="badge">新</span> 每年更新成本</li>
    </ul>

    <a href="#" class="list-group-item active">免费域名注册</a>
    <a href="#" class="list-group-item">免费Window空间托管</a>
    <a href="#" class="list-group-item">图像的数量</a>
    <br>

    <div class="panel panel-info">
        <div class="panel panel-heading">不带title的面板标题</div>

        <div class="panel-body">面板内容</div>
    </div>

    <div class="panel panel-danger">
        <div class="panel panel-heading">
            <h3 class="panel-title">带title的面板标题</h3>
        </div>
        <div class="panel-body">面板内容</div>
        <div class="panel-footer">面板注脚</div>
    </div>

    <div class="panel panel-default">
        <div class="panel panel-heading">
            <h3 class="panel-title">面板表格标题</h3>
        </div>
        <div class="panel panel-body">
            这是一个表格面板
        </div>
        <table class="table">
            <th>产品</th>
            <th>价格</th>
            <tr><td>产品A</td><td>200</td></tr>
            <tr><td>产品B</td><td>400</td></tr>
        </table>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">面板标题</div>
        <div class="panel-body">
            <p>这是一个基本的面板内容。这是一个基本的面板内容。
                这是一个基本的面板内容。这是一个基本的面板内容。
                这是一个基本的面板内容。这是一个基本的面板内容。
                这是一个基本的面板内容。这是一个基本的面板内容。         </p>
        </div>
        <ul class="list-group">
            <li class="list-group-item">免费域名注册</li>
            <li class="list-group-item">免费 Window 空间托管</li>
            <li class="list-group-item">图像的数量</li>
            <li class="list-group-item">24*7 支持</li>
            <li class="list-group-item">每年更新成本</li>
        </ul>
    </div>

    <div class="well well-sm">您好,我在well中!</div>
    <div class="well">您好,我在well中!</div>
    <div class="well well-lg">您好,我在well中!</div>
</div>


<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>